<template>
    <div class="mod-gridding">
        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
            <el-form-item>
                <el-input v-model="dataForm.deviceName" placeholder="设备名" clearable></el-input>
            </el-form-item>
               <el-form-item>
                <el-select v-model="dataForm.sucess" clearable filterable placeholder="设备是否接收">
                  <el-option v-for="item in sucessDicts" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item>
                <span class="demonstration">发送时间</span>
                <el-date-picker
                  v-model="dateValue"
                  type="daterange"
                  align="right"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :picker-options="pickerOptions2"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :default-time="['00:00:00', '23:59:59']">
                </el-date-picker>
              </el-form-item>
            <el-form-item>
                <el-button @click="getDataList()">{{ $t('handle.search') }}</el-button>
                <!-- <el-button  type="danger"  v-if="isAuth('batch:delete')" @click="deleteHandle()"  :disabled="dataListSelections.length <= 0">{{ $t('handle.batchDelete') }}</el-button> -->
            </el-form-item>
        </el-form>
        <el-table
            :data="dataList"
            border
            v-loading="dataListLoading"
            @selection-change="selectionChangeHandle"
            style="width: 100%;">
            <el-table-column
                type="selection"
                header-align="center"
                align="center"
                width="50">
            </el-table-column>
            <el-table-column
                v-if='show'
                prop="id"
                header-align="center"
                align="center"
                width="80"
                label="ID">
            </el-table-column>
            <el-table-column
                type="index"
               :label="$t('tabble.No')"
                width="50"
                :index="indexMethod">
            </el-table-column>
            <el-table-column
                prop="sendName"
                header-align="center"
                align="center"
                label="发送人">
            </el-table-column>
            <el-table-column
                prop="sendDate"
                header-align="center"
                align="center"
                label="发送时间">
            </el-table-column>
            <el-table-column
                prop="receiveDate"
                header-align="center"
                align="center"
                label="接收时间">
            </el-table-column>
            <el-table-column
                prop="deviceName"
                header-align="center"
                align="center"
                label="设备名">
            </el-table-column>
            <el-table-column
                prop="sucess"
                header-align="center"
                align="center"
                label="设备是否接收">
                <template slot-scope="scope">
                  <el-tag
                  :type="scope.row.sucess == 1 ? 'success' : 'danger'"
                  >{{sucessTypeFilter(scope.row.sucess)}}</el-tag>
              </template>
            </el-table-column>
            <!-- <el-table-column
                fixed="right"
                header-align="center"
                align="center"
                width="150"
                :label="$t('handle.handle')">
                <template slot-scope="scope">
                <el-button  type="text" v-if="isAuth('ic:gridding:update')" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('handle.update') }}</el-button>
                <el-button  type="text" v-if="isAuth('ic:gridding:delete')" size="small" @click="deleteHandle(scope.row.id)">{{ $t('handle.delete') }}</el-button>
                </template>
            </el-table-column> -->
        </el-table>
        <el-pagination
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="pageIndex"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            :total="totalPage"
            layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    </div>
</template>
<script>
import AddOrUpdate from "./gridding-add-or-update";
export default {
  data() {
    return {
      show: false,
      dataForm: {
        deviceName:"",
        sucess:""
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false,
      pickerOptions2: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      dateValue: "",
      sucessDicts: [],
      sucessDictType: { 1: "是" }
    };
  },
  computed: {
    sucessTypeFilter() {
      return function(type) {
        /** do something */
        return this.sucessDictType[type];
      };
    }
  },
  // 引入的组件
  components: {
    AddOrUpdate
  },
  created() {
    this.$http({
      url: "dg-ic/ic/dict/type/yes_or_no_status",
      method: "get"
    }).then(({ data }) => {
      if (data && data.code === 0) {
        this.sucessDicts = data.data;
        for (let i = 0; i < data.data.length; i++) {
          this.sucessDictType[data.data[i].value] = data.data[i].label;
        }
      }
    });
  },
  activated() {
    this.getDataList();
  },
  methods: {
    getDataList() {
      this.dataListLoading = true;
      this.$http({
        url: `/dg-ic/ic/mqtt/records/list`,
        method: "get",
        params: this.$http.adornParams({
          page: this.pageIndex,
          limit: this.pageSize,
          deviceName: this.dataForm.deviceName,
          sucess:this.dataForm.sucess,
          startDate: this.dateValue === null ? "" : this.dateValue[0],
          endDate: this.dateValue === null ? "" : this.dateValue[1]
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.data.list;
          this.totalPage = data.data.totalCount;
        } else {
          this.dataList = [];
          this.totalPage = 0;
          this.$message.error(data.msg);
        }
        this.dataListLoading = false;
      },
      error => {
          if (error.response.status === 403) {
            this.$message.error("你没有权限");
          } else {
            this.$message.error("系统错误，请联系管理员");
          }
        });
    },
    indexMethod(index) {
      return index + 1;
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val;
    },
    // 新增/修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id);
      });
    },
    // 删除
    deleteHandle(id) {
      var ids = id
        ? [id]
        : this.dataListSelections.map(item => {
            return item.id;
          });
      this.$confirm(`确定进行删除操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$http({
          url: `/dg-ic/ic/gridding/delete`,
          method: "delete",
          data: this.$http.adornData(ids, false)
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message({
              message: "删除成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                this.getDataList();
              }
            });
          } else {
            this.$message.error(data.msg);
          }
        });
      });
    }
  }
};
</script>

